<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>购物车</h1>

    <div>
      手机-¥{{ phonePrice }}-数量：{{ phoneQuantity }} <button @click="increasePhoneQuantity">+</button>
      <button @click="decreasePhoneQuantity">-</button>
    </div>
    <div>
      电脑-¥{{ computerPrice }}-数量：{{ computerQuantity }} <button @click="increaseComputerQuantity">+</button>
      <button @click="decreaseComputerQuantity">-</button>
    </div>
    <div>
      键盘-¥{{ keyboardPrice }}-数量：{{ keyboardQuantity }} <button @click="increaseKeyboardQuantity">+</button>
      <button @click="decreaseKeyboardQuantity">-</button>
    </div>
    <p>总价：¥{{ totalPrice }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['phonePrice', 'computerPrice', 'keyboardPrice', 'totalPrice', 'phoneQuantity', 'computerQuantity', 'keyboardQuantity']),
  },
  methods: {
    ...mapActions(['increasePhoneQuantity', 'decreasePhoneQuantity', 'increaseComputerQuantity', 'decreaseComputerQuantity', 'increaseKeyboardQuantity', 'decreaseKeyboardQuantity']),
  },
};
</script>